{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}{{ name }}{% endblock %}</h1>
{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='codemirror/codemirror.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='codemirror/theme/ayu-dark.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='codemirror/theme/seti.css') }}">
<script src="../../static/codemirror/codemirror.js"></script>
<script src="../../static/codemirror/mode/yaml/yaml.js"></script>
<script src="../../static/codemirror/mode/javascript/javascript.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.4/FileSaver.js"></script>
<article class="post">
    <header>
        <div>
            <h1>create service with yaml</h1>
            <textarea id="code" name="code"></textarea>
            <form>
                service name: <input type="text" id="name"/>
                <button type="button" onclick="dosubmit()" id="submit">submit</button>
            </form>
        </div>
    </header>
</article>
<script type="text/javascript">
    function dosubmit() {
        var name = document.getElementById("name").value
        var content = editor.getValue();
        content = content.replaceAll("\n", "huanhang");
        window.location.href = "/getyaml?name=" + name + "&data=" + content
        // var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        // saveAs(blob, ",save.yaml");
        // window.alert(content)
    }
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            mode: "text/yaml",
            theme: "ayu-dark",
            lineNumbers: true,
            // tabSize: 1,
            readOnly: false,
            lineWrapping: true,
            // gutters: ["CodeMirror-lint-markers"],
        });


</script>


{% endblock %}


